<template>
  <div class="table-container" >
    <div class="table-header" :style="'color:'+titleColor">
      {{title}}
    </div>
    <div class="table-content" :style="'color:'+textColor" @click="onSelect">
      <div class="table-item" v-for="item in cities" :key="item.id" 
        :data-id="item.id" :data-name="item.name"
      >
        {{item.name}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    title: String,
    titleColor:{
      type: String,
      default: '#666'
    },
    textColor: {
      type: String,
      default: '#666'
    },
    cities:{
      type: Array,
      default: _=>[]
    }
  },

  methods:{
 
    // 事件委托
    onSelect(e){
      const target = e.target?e.target:e.srcElement
      if(target && target.className === 'table-item' ){
        this.$emit('onSelect', {
          id: target.dataset.id,
          name: target.dataset.name
        })
      }
      
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../../../styles/mixin.scss';
.table-container{
  background: #fff;
  display: flex;
  flex-direction: column;
  .table-header{
    padding: .1rem .16rem;
    font-size: .13rem;
  }
  .table-content{
    @include grey-top-border;
    display: flex;
    flex-wrap: wrap;
    .table-item{
      width: 25%;
      height: .42rem;
      line-height: .42rem;
      text-align: center;
      @include text-ellipsis;
      @include grey-bottom-border;
      @include grey-right-border;
    }
    .table-item:nth-of-type(4n){
      border-right: none;
    }
  }
  
}
</style>